<template>
	<view class="goods-item" @tap="toDetail(item)">
		<view class="goods-images">
			<image class="goods-img" :src="item.skuImage"></image>
		</view>
		<view class="goods-content">
			<view class="goods-content__title">
				<view class="goods-name">
					<image class="shop-logo" src="@/static/icons/jd.png" />
					{{ item.skuName }}
				</view>
			</view>
			<view class="goods-info">
				<view class="discount">
					<view class="coupon">
						<view class="circle-left"></view>
						<view class="circle-right"></view>
						{{ item.couponDiscount }}元券
					</view>
					<block v-for="(perm, index) in permInfo.common" :key="index">
						<view class="subsidy" v-if="perm.name === 'isShelf' && perm.status === 1">
							<view class="circle-left"></view>
							<view class="circle-right"></view>
							补贴¥{{ item.couponCommissionApp | Fixed(2) }}
						</view>
					</block>
				</view>
			</view>

			<view style="margin-top:20rpx">
				<view class="goods-footer">
					<view class="goods-price">
						<view class="goods-price__title">到手价</view>
						<view class="goods-price__box">
							<view class="deal"
								>¥<span>{{ item.lowestCouponPrice | Fixed(2) }}</span></view
							>
							<view class="original">
								<p>¥{{ item.lowestPrice | Fixed(2) }}</p>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-btn">
					<view class="sale">销量{{ item.inOrderCount30Days | formatMyriadNum }}</view>
					<view class="buy-btn">领券购买</view>
				</view>
			</view>
		</view>
		<loading-dig ref="loading-dig"></loading-dig>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
const JDopen = uni.requireNativePlugin('UZK-JDopen');
import LoadingDig from '@/components/LoadingDig';

export default {
	name: 'JdGoodsItem',

	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return '';
			}
		},
		isLoading: {
			type: Boolean,
			default: true
		}
	},
	components: {
		LoadingDig
	},
	onReady() {
		JDopen.init(result => {
			this.showmsg(result.msg);
			console.log(JSON.stringify(result));
		});
	},
	computed: {
		...mapGetters(['permInfo'])
	},
	methods: {
		toDetail(item) {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/common/login',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
				return false;
			}
			if (this.isLoading) {
				this.$refs['loading-dig'].open({ type: 1 }, done => {
					this.$service.jingdong.goods
						.createShortUrl({
							materialUrl: item.materialUrl,
							couponLink: item.couponLink
						})
						.then(res => {
							this.$emit('succ', res);
							JDopen.openurl(
								{
									url: res
								},
								result => {
									if (!result.status) {
										return this.$Router.push({
											path: '/pages/special/jingdong',
											query: {
												url: res
											}
										});
									}
									done();
								}
							);
						})
						.catch(err => {
							done();
							uni.showToast({
								title: err.message,
								icon: 'none'
							});
						});
				});
			} else {
				this.$service.jingdong.goods
					.createShortUrl({
						materialUrl: item.materialUrl,
						couponLink: item.couponLink
					})
					.then(res => {
						this.$emit('succ', res);
						JDopen.openurl(
							{
								url: res
							},
							result => {
								if (!result.status) {
									return this.$Router.push({
										path: '/pages/special/jingdong',
										query: {
											url: res
										}
									});
								}
							}
						);
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	background: $color-white;
	@include flexBox(space-between);

	.goods-images {
		width: 240rpx;
		height: 240rpx;
		border-radius: 8rpx;
		overflow: hidden;
		@include flexBox(center, center);
		image {
			width: 100%;
			height: 100%;
		}
	}
	.goods-content {
		flex: 1;
		margin-left: 30rpx;
		@include flexBox(space-between, null, column);
		.goods-content__title {
			@include flexBox(null, null);
			.goods-name {
				text-indent: 6rpx;
				font-size: 28rpx;
				color: $text-black;
				position: relative;
				@include ellipsis(2);
				.shop-logo {
					height: 36rpx;
					width: 36rpx;
					position: relative;
					top: 8rpx;
					right: 5rpx;
				}
			}
			.share-box {
				min-width: 54rpx;
				height: 32rpx;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				font-size: 25rpx;
				background: #f0f0f0;
				color: #7c7c7c;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.goods-info {
			margin-top: 10rpx;
			@include flexBox(space-between, center);
			.discount {
				display: flex;
				.coupon {
					padding: 0rpx 18rpx;
					background: $main-color;
					border-radius: 4rpx;
					display: inline;
					font-size: 24rpx;
					color: $color-white;
					position: relative;
					margin-right: 20rpx;
				}
				.subsidy {
					padding: 0rpx 18rpx;
					background: #ffeed1;
					border-radius: 4rpx;
					display: inline;
					font-size: 24rpx;
					color: #925114;
					position: relative;
				}
				.circle-left {
					width: 12rpx;
					height: 12rpx;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6rpx;
					left: -6rpx;
				}
				.circle-right {
					width: 12rpx;
					height: 12rpx;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6rpx;
					right: -6rpx;
				}
			}
		}
	}
}

.goods-footer {
	.goods-price {
		color: #b5b5b5;
		font-size: 24rpx;
		.goods-price__title {
			font-size: 24rpx;
			color: #b5b5b5;
		}
		.goods-price__box {
			@include flexBox(null, center);
			.deal {
				color: #f70114;
				font-size: 28rpx;
				margin-right: 16rpx;
				font-weight: 600;
				line-height: 1;
				span {
					font-size: 36rpx;
				}
			}
			.original {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #b5b5b5;
				text-decoration: line-through;
			}
		}
	}
}
.goods-btn {
	@include flexBox(space-between, flex-end);

	.sale {
		font-size: 24rpx;
		color: #aaa6a6;
	}
	.buy-btn {
		font-size: 24rpx;
		color: #f70114;
		border-radius: 18rpx;
		width: 124rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		border: 1px solid #f70114;
	}
}
</style>
